<template>
    <div class="top_view">
        <div v-if="userState.token" class="member_con">
            <button class="message_btn">
                <img src="../images/icon_message.svg" alt="">
            </button>
            <button class="help_btn">
                <img src="../images/icon_help.svg" alt="">
            </button>
            <button class="signpost_btn">
                <img src="../images/icon_signpost.svg" alt="">
            </button>
            <div v-if="userState.token" class="member">
                <div class="head">
                    <img v-if="userState.avatar" :src="userState.avatar" alt="">
                    <img v-if="!userState.avatar" src="../images/default_head.png" alt="">
                </div>
                <p class="nickName">{{ userState.nickname }}</p>
                <div v-if="userState.isMember" class="member_badge">
                    <img src="../images/icon_member.svg" alt="">
                    会员
                </div>
                <button class="member_btn" @click="showMemberInfo">
                    <img :class="{'routate180':isShowMemberInfo }" src="../images/arrow_down.png" alt="">
                </button>
                <div class="slide_box" :class="[{'active':isShowMemberInfo }]">
                    <div class="slide_box_top">
                        <div class="userInfo">
                            <p class="nickName">{{ userState.nickname }}</p>
                            <div v-if="userState.isMember" class="member_badge">
                                <img src="../images/icon_member.svg" alt="">
                                会员
                            </div>
                        </div>
                        <button class="renew">续费会员</button>
                    </div>
                    <ul class="user_menu">
                        <!-- <li>个人信息设置<span></span></li>
                        <li>购买记录<span></span></li>
                        <li>联系客服<span></span></li> -->
                        <li @click="toLogout">退出登录<span></span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div v-if="!userState.token" class="login_con">
            <a class="login_btn" @click="toLogin" href="javascript:;">登 入</a>
            <a class="regist_btn" @click="toRegist" href="javascript:;">注 册</a>
        </div>
    </div>
</template>

<script setup>
import { ref, provide, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
import { useUserStore } from '../store/user';
import { getUserInfo } from '../api/user';
import { ElLoading } from 'element-plus';
  const { 
      userState,
      resetUserState,
      setUsername
  } = useUserStore()

  console.log(userState)

let isShowMemberInfo = ref(false)
let isMember = ref(false)
let loginLoading =  null

const instance = getCurrentInstance();
const eventBus = instance?.proxy.$eventBus;


// if (userState.token) {
//     loginSuccessHandler()
// }

function loginSuccessHandler() {
    console.log('登录成功，执行 getUserInfoFn');
    // 在这里调用 getUserInfoFn 或其他函数
    getUserInfo().then(res => {

        const data = res.data
        if (res.status === 200) {

        }
        console.log('获取用户信息：', res)
    })
};

// 全局点击事件监听
function handleClickOutside(e) {
    const menuElement = document.querySelector('.member');
    if (menuElement && !menuElement.contains(e.target)) {
        isShowMemberInfo.value = false; // 如果点击的是菜单以外的区域，收起菜单
    }
};

onMounted(() => {
    if (eventBus) {
        eventBus.on('loginSuccess', loginSuccessHandler);
    }
    // 监听全局点击事件
    document.addEventListener('click', handleClickOutside);
})

onBeforeUnmount(() => {
    if (eventBus) {
        eventBus.off('loginSuccess', loginSuccessHandler);
    }
    document.removeEventListener('click', handleClickOutside);
});


function showMemberInfo() {
    isShowMemberInfo.value = !isShowMemberInfo.value
    console.log(isShowMemberInfo.value)
}

function toLogout() {
    loginLoading = ElLoading.service({
        target: document.body,
        text: '退出登录',
        customClass: 'custom-loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    setTimeout(() => {
        // emit('sendUserInfo')
        resetUserState()
        loginLoading.close()
        // location.reload()
    }, 1000)
}


function toLogin() {
    userState.isShowLogin = true
    userState.pageIndex = 0
}
function toRegist() {
    userState.isShowLogin = true
    userState.pageIndex = 2
}

</script>

<style scoped>

.message_btn,.help_btn,.signpost_btn {
    cursor: pointer;
    transform: scale(0.8);
}

.top_view{
    width: 100%;
    height: 80px;
    background-color: #40414f;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
}

.member_con {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
    padding-right: 20px;
}

.member {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
    border-radius: 99px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.1);
    border-width: 1px;
    /* width: 242px; */
    height: 52px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    gap: 10px;
    position: relative;
}

.head {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    overflow: hidden;

}

.head img {
    width: 100%;
    height: 100%;
}

.nickName {
    /* width: 60px; */
    font-size: 16px;
    color: #FFF;
    /* background-color: red; */
}

.member_badge {
    background: linear-gradient(180deg, rgba(208, 219, 82, 1) 0%, rgba(198, 167, 26, 1) 100%);
    border-radius: 21px;
    padding: 0 10px;
    height: 22px;
    box-sizing: border-box;
    color: #FFF;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.member_btn {
    padding: 0 15px 0 10px;
    cursor: pointer;
}

.member_btn img {
    width: 14px;
}

.slide_box {
    width: 342px;
    height: 0;
    background-color: #4c4c64;
    position: absolute;
    right: 0;
    top: 65px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    transition: height 0.5s ease;
    z-index: 10;
}

.slide_box.active {
    height: 304px;  /* 有4个的时候用这个 */
    height: 134px;  
    /* height: auto; */
}

.routate180 {
    transform: rotate(180deg);
}

.slide_box_top {
    width: 100%;
    height: 60px;
    background-color:#616161 ;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; 
    box-sizing: border-box;
}

.userInfo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.renew {
    background: linear-gradient(180deg, rgba(218, 224, 149, 1) 0%, rgba(233, 202, 63, 1) 100%);
    border-radius: 17px;
    width: 119px;
    height: 34px;
    color: #FFF;
}

.user_menu {
    width: 100%;
    /* height: 300px; */
    margin-top: 10px;
}

.user_menu li {
    width: 100%;
    height: 56px;
    line-height: 56px;
    font-size: 16px;
    padding-left: 60px;
    box-sizing: border-box;
    color: #FFF;
    position: relative;
    cursor: pointer;
    transition: all .5s;
}

.user_menu li:hover {
    background-color: rgba(255,255,255, .2)
}

.user_menu li::before {
    content: '';
    width: 26px;
    height: 26px;
    background-color: #d9d9d9;
    border-radius: 100px;
    position: absolute;
    left: 20px;
    top: 14px;
}

.user_menu li span {
    width: 20px;
    height: 20px;
    background: url(../images/arrow_down.png) no-repeat;
    background-size: 70%;
    transform: rotate(270deg);
    display: block;
    position: absolute;
    right: 10px;
    top: 15px;
}



.login_con {
    width: 180px;
    height: 40px;
    background-color: rgba(99, 188, 251, 0.2);
    border-radius: 10px;
    box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 0px inset;
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-right: 20px;
}

.login_btn, 
.regist_btn {
    color: #fff;
    font-size: 16px;
    transition: all .5s;
}

.login_btn:hover, 
.regist_btn:hover{
    color: rgb(113, 113, 249);;
}



</style>
    
    